* {
    box-sizing: border-box;
}

footer,
header,
menu,
summary {
    display: block
}
a {
    color: #4381cf; /* Unvisited links are blue */
    text-decoration: none; /* Optional: remove underline */
}

    a:visited {
        /*color: red;  Visited links are red */
    }

body {
    margin: 0;
    font-family: "Open Sans",Verdana, Geneva, sans-serif;
    font-size: 16px;
    line-height: 1.42857143;
    color: #284444;
    background-color: #f4f4f4
}

h2 {
    color: #05759a;
    font-family: Lato,sans-serif;
    font-size: 2.2rem;
    line-height: 1.1;
    letter-spacing: 0;
    font-weight: 700;
    margin: 0 0 0 0;
}

h3 {
    color: #05759a;
    font-family: Lato,sans-serif;
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing:0px;
    line-height:35px;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 20px;
}
@media screen and (max-width: 1200px) {
    h3 {
         font-weight:600;
     }
}

p {
    margin: 0 0 0 2px;
}

.container {
    font-family: Lato,sans-serif;
    letter-spacing: 0px;
    display: flex;
    flex-wrap: wrap;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 100px;
    margin-right: auto;
    margin-left: auto;
    width:70%
}
@media screen and (max-width: 1200px) {
    .container {
        width: 100%;
        padding-top: 0px;
    }
}

.main-content {
    padding-top: 40px;
    padding-bottom: 15px;
    display: block;
    float: left;
    width: 70%;
    text-align: left;
    font-size: 18px;
    margin:auto
}
@media screen and (max-width: 1200px) {
    .main-content {
        width: 100%;
        padding-top: 0px;
    }
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: white;
    height: 100%;
    overflow: hidden;
    top: 0;
}

li {
    float: left;
    width: 20%;
    text-align: center;
    padding: 10px 5px 10px 5px;
    font-size: 18px;
}
    li a {
        display: block;
        color: #808080;
        padding: 8px 16px;
        text-decoration: none;
        position: relative;
    }
@media screen and (max-width: 1200px) {
    li {
        text-align: center;
        float: left;
        width: 100%;
        border-radius: 5px;
        border: 1px solid rgba(21, 21, 21, 0.05);
    }
        li a:hover:not(.active) {
            color: #05759a;
            background-color: #eeeeee
        }
}
@media screen and (max-width: 760px) {
    li {
        padding: 0px 0px 0px 0px;
        font-size: 17px;
    }
}
li a:hover:not(.active) {
    color: #05759a;
    background-color: #f8f8f8
}



div.content {
    margin-left: 25%;
    padding: 1px 16px;
    height: 1000px;
}

.body-col {
    width: 24%;
    margin-bottom: 30px;
    padding-left: 20px;
}

.book-image {
    width: 35%;
    margin: 0 auto;
    float: left;
    padding-top: 30px;
    padding-bottom: 40px;
    padding-left: 40px;
    display:block;
}

@media screen and (max-width: 1200px) {
    .book-image {
        width: 50%;
        float: left;
        padding-left: 5px;
        padding-right: 5px;
    }
}
.image {
    width: 40%;
    margin: auto;
    float: right;
    padding-top: 40px;
    padding-bottom: 40px;
}

@media screen and (max-width: 1200px) {
    .image {
        width: 100%;
        margin: auto;
        margin-right: 0px;
        float: left;
    }
}


#map {
    width:50%;
    padding-top: 30px;
}

@media screen and (max-width: 1200px) {
    #map {
        float: none;
        width: 100%;
        /* display: none;*/
    }
}

.main-content-col {
    width: 50%;
    float: left;
}
@media screen and (max-width: 1200px) {
    .main-content-col {
        width: 100%;
    }
}
@media screen and (max-width: 760px) {
    .main-content-col {
        width: 100%;
        float: none;
    }
}

dialog {
    animation: fade-out 0.7s ease-out;
}

    dialog[open] {
        animation: fade-in 0.7s ease-out;
    }

        dialog[open]::backdrop {
            animation: backdrop-fade-in 0.7s ease-out forwards;
        }

/* Animation keyframes */

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: scaleY(0);
        display: none;
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
        display: block;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
        transform: scaleY(1);
        display: block;
    }

    100% {
        opacity: 0;
        transform: scaleY(0);
        display: none;
    }
}

@keyframes backdrop-fade-in {
    0% {
        background-color: rgb(0 0 0 / 0%);
    }

    100% {
        background-color: rgb(0 0 0 / 25%);
    }
}


.button {
    font-family: system-ui;
    background-color: #ececec;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
}

.close {

    border: none;
    color: black;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 130px;
}
    .close:hover {
        border: none;
    }    
    .close:focus {
        border: none;
        outline: none;
    }
.ContentBox {
    box-shadow: 0 10px 30px rgba(0,0,0,.051);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    z-index:100;
}

@media(max-width:750px) {
    .ContentBox {
        margin-left: 15px;
        margin-right: 15px;
        width: auto
    }
}
@media(max-width:580px) {
    .ContentBox {
        box-shadow: 0 0px 0px rgba(0,0,0,.051);
        margin-left: 0px;
        margin-right: 0px;
        width: auto;
        flex-direction: column-reverse;
        padding: 0px 0px 0px 0px;
    }
}
.ContentBoxList {
    margin: 80px auto;
    width: 75%
}

[class=l-pagegrid--content] .ContentBoxList {
    width: 66.6666666667%
}

@media(max-width:750px) {
    [class=l-pagegrid--content] .ContentBoxList {
        width: auto
    }

    .ContentBoxList {
        margin-left: 15px;
        margin-right: 15px;
        width: 100%
    }
}

@media(max-width:980px) {
    .ContentBoxList {
        margin-left: auto;
        margin-right: auto;
        width: 66.6666666667%
    }
}

@media(max-width:980px)and (max-width:750px) {
    .ContentBoxList {
        margin-left: 15px;
        margin-right: 15px
    }
}

@media(max-width:750px) {
    .ContentBoxList {
        width: auto
    }
}
.ContentBox--imgWrapper {
    align-items: center;
    align-self: stretch;
    display: flex;
    justify-content: center;
    justify-items: center;
    min-height: 192px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 192px
}
@media(max-width:750px) {
    .ContentBox--imgWrapper {
        min-height: unset;
        min-width: 120px;
        width: 120px
    }
}

@media(max-width:580px) {
    .ContentBox--imgWrapper {
        min-height: 192px;
        width: 100%
    }
}
.ContentBox--cover {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active) {
    .ContentBox--cover {
        left: auto;
        min-height: 200px;
        position: relative;
        top: auto;
        width: 100%
    }
}

@media (-ms-high-contrast:none)and (max-width:750px),screen and (-ms-high-contrast:active)and (max-width:750px) {
    .ContentBox--cover {
        min-height: none
    }
}

.ContentBox--body {
    align-self: stretch;
    background-color: #fff;
    display: block;
    flex: 1 1 auto;
    position: relative;
    width: 75%
}

@media(max-width:750px) {
    .ContentBox--body {
        width: calc(100% - 80px)
    }
}

@media(max-width:580px) {
    .ContentBox--body {
        width: 100%
    }
}

.ContentBox--body--inner {
    height: 100%;
    padding: 15px 30px
}

@media(max-width:1100px) {
    .ContentBox--body--inner {
        padding: 20px
    }
}

@media(max-width:750px) {
    .ContentBox--body--inner {
        padding: 10px
    }
}

.ContentBox--text {
    font-size: 18px;
    font-size: 1rem;
    line-height: 29px;
    line-height: 1.6111111111rem
}

@media(max-width:750px) {
    .ContentBox--text {
        line-height: 1.5
    }
}


.ContentBox--footerLink {
    align-items: center;
    display: flex;
    margin-top: 30px;
    color: #05759a
}

@media(max-width:750px) {
    .ContentBox--footerLink {
        bottom: 15px;
        right: 10px;
        width: 100%
    }
}
.ContentBox--title {
    color: #284444;
    font-size: 18px;
    font-size: 1rem;
    font-size: 1.1em;
    font-weight: 700;
    line-height: 29px;
    line-height: 1.6111111111rem;
    margin-bottom: 1em
}

@media(max-width:750px) {
    .ContentBox--title {
        line-height: 1.5
    }
}

@media(min-width:1101px) {
    .ContentBox--title {
        font-size: 18px
    }
}

.myli {
    width:50%;
    text-align:left;
    margin-top:0px;
    margin-bottom: 15px;
    padding: 0px;
}
    myli a {
        display: block;
        color: #808080;
        padding: 0px 0px;
        text-decoration: none;
        position: relative;
    }

@media(max-width:1200px) {
    .myli {
        width: 100%;
        text-align: left;
        margin: 5px;
        padding: 0px 0px 0px 0px;
    }
}
@media(max-width:750px) {
    .myli {
        width: 100%;
        text-align: left;
        margin: 5px;
        padding: 0px 0px 0px 0px;
    }
}